<template>
  <div class="addExpense">
    <el-form ref="form" :model="form" :rules="roleCodeRule" label-width="120px">
      <el-row>
        <mainTilte title="模板基础信息" />
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="模板名称">
            <el-input v-model.trim="form.name" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="店铺">
            <el-input v-model.trim="form.shop_name" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开始时间">
            <el-input v-model.trim="form.start_time" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束时间">
            <el-input v-model.trim="form.end_time" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注">
            <el-input v-model="form.remarks" type="textarea" autosize disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <mainTilte title="商品明细信息" />
      </el-row>
      <el-row>
        <egrid
          v-loading="loading"
          class="egrid"
          stripe
          fit
          border
          highlight-current-row
          element-loading-text="正在努力加载中..."
          :data="form.list"
          :columns="columns"
          :columns-schema="columnsSchema"
          :columns-handler="columnsHandler"
          @selection-change="checkIds"
        />
      </el-row>
    </el-form>
    <div style="text-align: center; margin-top: 15px">
      <el-button type="primary" @click="$router.push('/product/presaleActivity')">返回</el-button>
    </div>
  </div>
</template>

<script>
import list from '@/layout/mixin/list'
import thund from '@/components/base/thund'
import dicTime from '@/components/dicTime/index'
import dicValues from '@/components/dicTransform/index'
export default {
  mixins: [list],
  data() {
    return {
      form: {},
      roleCodeRule: {},
      columns: [
        {
          label: '缩略图',
          prop: 'image_url',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '系统sku',
          prop: 'code',
          align: 'center',
          tooltip: false
        },
        {
          label: '预计发货日期',
          prop: 'estimated_delivery_time',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '中文名称',
          prop: 'name_ch',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '英文名称',
          prop: 'name_en',
          align: 'center',
          tooltip: false
        },
        {
          label: '包装方式',
          prop: 'packing_method',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '商品分类',
          prop: 'category_text',
          width: '200',
          align: 'center',
          tooltip: false
        }
      ],
      columnsSchema: {
        缩略图: {
          propsHandler({ col, row }) {
            return {
              img: row.image_url
            }
          },
          component: thund
        },
        包装方式: {
          propsHandler({ col, row }) {
            return {
              code: row.packing_method,
              dictionaries: [
                {
                  code: 1,
                  name: '普通商品'
                },
                {
                  code: 2,
                  name: '多箱包装'
                }
              ]
            }
          },
          component: dicValues
        },
        预计发货日期: {
          propsHandler({ col, row }) {
            return {
              code: row[col.prop]
            }
          },
          component: dicTime
        }
      }
    }
  },
  mounted() {
    if (this.$route.query && this.$route.query.id) {
      this.getDetailData(this.$route.query.id)
    }
  },
  methods: {
    getDetailData(id) {
      this.$http
        .get(`/productPresale/${id}`)
        .then((res) => {
          if (res.code == 10000) {
            this.form = res.data
            this.form.list = res.data.list.map((e) => {
              e['category_text'] = `${e.parent_name}-${e.category_name}`
              return e
            })
            this.form.start_time = this.timestampToTime(this.form.start_time)
            this.form.end_time = this.timestampToTime(this.form.end_time)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    add0(m) {
      return m < 10 ? '0' + m : m
    },
    // 时间戳转化成时间格式
    timestampToTime(timestamp) {
      // timestamp是整数，否则要parseInt转换,不会出现少个0的情况
      var time = new Date(timestamp * 1000)
      var year = time.getFullYear()
      var month = time.getMonth() + 1
      var date = time.getDate()
      var hours = time.getHours()
      var minutes = time.getMinutes()
      var seconds = time.getSeconds()
      return (
        year +
        '-' +
        this.add0(month) +
        '-' +
        this.add0(date) +
        ' ' +
        this.add0(hours) +
        ':' +
        this.add0(minutes) +
        ':' +
        this.add0(seconds)
      )
    },
    columnsHandler() {}
  }
}
</script>

<style scoped>
.addExpense {
  padding: 15px;
  background: #fff;
}
/deep/.el-select,
.el-autocomplete {
  width: 100%;
}
</style>
